<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="JQuery.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 表单验证jquery插件 validate -->
    <script src="jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入jq_canvas-验证码.js -->
    <script src="code.js" type="text/javascript" charset="utf-8"></script>
<style>
    body{
        background-image: url(cat.jpg);
        /* 把背景图片放大到适合元素容器的尺寸，图片比例不变， */
        background-size: cover;
        /* background-repeat: no-repeat; */
    }
    img{
        opacity: 0.8;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .inp{
        height: 30px;
        border: 1px solid rgba(0,0,0,0);
        /* border: none; */
        border-radius: 15px;
        background-color: #fff;
    }
    .kuang{
        display: block;
        font-size: 10px;
        padding: 5px;
        /* text-align: center; */
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 53px;
        /* width: 400px; */
    }
    /* 提示语的颜色设置 */
    .error{
        color: #ff0000;
    }
    #zhuce{
        /* background: #f9f9f9; */
        background: rgba(255,255,255,0.4);
        /* opacity: 0.9; */
        position: relative;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        border: 5px solid #989898;
        border-radius: 5px;
        width: 430px;
        box-shadow: 15px 20px 15px #5b5b5b;
        display: block;
        /* text-align: center; */
    }
    .sub{
        margin-left: 100px;
        margin-bottom: 20px;
        font-size: 10px;
        width: 250px;
        height: 40px;
        background-color: #06bf9a;
        border: none;
        /* border: 5px #5cff92 outset; */
        border-radius: 15px;
        /* 手势 */
        cursor: pointer;
    }
    #check{
        margin-top: 25px;
        margin-bottom: 10px;
        margin-left: 30px;
    }
    a{
        color: #0b2c89;
        text-decoration: none;
    }
    /* 验证码 */
    #yzm{
        width: 370px;
        height: 20px;
    }
    #canvas{
        float: right;
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;
    }
    #yan{
        color: #FF0000;
        margin-left: 60px;
        font-size: 10px;
    }
    span{
        font-size: 16px;
    }

</style>
</head>
<body>
<form action="#" method="get" id="zhuce">
<!--    <img src="images/豹.png" width="150px">-->
    <!-- <h3>用户注册</h2> -->
    <div class="kuang">
        <span>用户名</span>
        <!-- 空格占位符 一个中文空格+四分之一空格 -->
        &#8194;&#8197;&#8194;
        <input type="text" class="inp" id="user" name="username" placeholder="请输入用户名" />
    </div>
    <div class="kuang">
        <span>设置密码</span>
        &#8194;
        <input type="password" class="inp" id="pwd" name="password" placeholder="请输入密码" />
    </div>
    <div class="kuang">
        <span>确认密码</span>
        &#8194;
        <input type="password" class="inp" id="second_pwd" name="second_pwd" placeholder="请再次输入密码" />
    </div>
    <div class="kuang">
        <span>电子邮箱</span>
        &#8194;
        <input id="email" class="inp" name="email" type="email" placeholder="请输入正确的邮箱格式">
    </div>
    <div class="kuang">
        <select style="width: 80px;height: 30px;background-color:rgba(2,2,2,0)">
            <option value="中国 +86" selected >中国 +86</option>
            <option value="中国香港特别行政区 +852">中国香港特别行政区 +852</option>
            <option value="中国澳门特别行政区 +853" >中国澳门特别行政区 +853</option>
            <option value="中国台湾地区 +886" >中国台湾地区 +886</option>
        </select>
        <input type="text" class="inp" name="phone" placeholder="手机号码" />
    </div>

    <!-- 自己添加的 验证码jqc插件 -->
    <div class="kuang" id="yzm">
        <span><label>验证码</label></span>&#8194;&#8197;&#8194;&#8194;
        <input type="text" placeholder="验证码不区分大小写" class="inp" id="input-val"/>
        <canvas id="canvas" width="100" height="43" style="background-color: #fff;"></canvas>
        <br />
        <label id="yan"></label>
    </div>

    <div id="check">
        <input type="checkbox" style="padding-top: 80px;" ><label>我已阅读并同意</label>
        <a target="_blank" href="#">《使用条款》</a>
        及
        <a target="_blank" href="#">《非活跃帐号处理规范》</a>
    </div>

    <div><button type="submit" class="sub"><span>提交</span></button></div>
</form>

<script>

    $(function(){
        // Validate 插件为表单提供验证功能
        $("#zhuce").validate({
            rules:{
                // 绑定的是 name
                username:{
                    required: true,
                },
                password:{
                    required: true,
                    rangelength:[8,20],
                },
                second_pwd:{
                    required: true,
                    rangelength:[8,20],
                    equalTo:"#pwd",
                },
                email:{
                    required: true,
                    email:true,
                },
                phone:{
                    required: true,
                    minlength:11,
                }
            },
            messages:{
                username:'请输入用户名',
                password:{
                    required:'密码不能为空',
                    rangelength:"密码长度在8~20位",
                },
                second_pwd:{
                    required:'密码不能为空',
                    rangelength:"密码长度在8~20位",
                    equalTo:'两次密码不同',
                },
                email:{
                    required:'请输入电子邮箱',
                    email:'请输入正确的邮箱格式',
                },
                phone:{
                    required:"手机号码不能为空",
                    minlength:"手机号应为11位",
                },
            }

        });
        // 验证码 jquery代码
        code_draw();
        // 点击后刷新验证码
        $("#canvas").on('click', function() {
            code_draw();
        })
        $(".sub").on('click', function() {
            // 将输入的内容转为大写，可通过这步进行大小写验证
            let val = $("#input-val").val().toLowerCase();
            // 获取生成验证码值
            var num = $('#canvas').attr('data-code');
            if (val == '') {
                // alert('请输入验证码！');
                // $("<br>"+"<label >验证码为空</label>").appendTo("#yan");
                $("#yan").text("验证码不能为空");
            } else if (val == num) {
                // alert('提交成功！');
                $("#yan").text("验证码输入正确");
                $("#input-val").val('');
                draw(show_num);

            } else {
                // alert('验证码错误！请重新输入！');
                $("#yan").text("验证码错误！请重新输入！");
                $("#input-val").val('');
                draw(show_num);
            }
            // console.log(1);
        });
    });
    $.validator.setDefaults({
        submitHandler: function() {
            alert("表单提交成功!!!!");
        }
    });

</script>
</body>
</html>